@use "@/common/styles/colors"

.summary-dialog
  display: flex
  flex-direction: column
  gap: 1rem
  min-width: 400px

  .dialog-title
    display: flex
    align-items: center
    gap: 0.5rem
    margin: 0

    svg
      width: 1.5rem
      height: 1.5rem
      color: colors.$primary

    h2
      margin: 0
      font-size: 1.2rem

  .summary-content
    .summary-table
      display: flex
      flex-direction: column
      gap: 0.5rem

      .summary-row
        display: grid
        grid-template-columns: 1fr 2fr auto
        gap: 1rem
        padding: 0.75rem
        background: colors.$dark-gray
        border-radius: 0.25rem
        border: 1px solid colors.$gray
        align-items: center

        .summary-key
          font-weight: 600
          color: colors.$white
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis

        .summary-value
          color: colors.$subtext
          word-break: break-word

          &.is-link
            a
              color: colors.$primary
              text-decoration: none
              transition: color 0.2s ease

              &:hover
                color: colors.$primary
                text-decoration: underline
                filter: brightness(1.2)

        .action-buttons
          display: flex
          gap: 0.5rem
          align-items: center

        .copy-button, .open-button
          background: transparent
          border: 1px solid colors.$gray
          border-radius: 0.25rem
          padding: 0.375rem
          cursor: pointer
          transition: all 0.2s ease
          display: flex
          align-items: center
          justify-content: center
          opacity: 0.7

          svg
            width: 1rem
            height: 1rem
            color: colors.$subtext

          &:hover
            background: colors.$gray
            border-color: colors.$primary
            opacity: 1

            svg
              color: colors.$primary

          &:active
            transform: scale(0.95)

        .open-button
          &:hover
            border-color: colors.$success

            svg
              color: colors.$success

    .no-data
      text-align: center
      padding: 2rem
      color: colors.$subtext

      p
        margin: 0

  .dialog-actions
    display: flex
    justify-content: flex-end
    gap: 0.5rem
